<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
</head>
<body>
  <div id="app">
      <h1>{{header}}</h1>
      <h2>{{welcome}}</h2>
      <h3>{{counter}}</h3>
      <button @click="increment">Press Me</button>
  </div>
<script>
  const store = new Vuex.Store({
      state: {
        msg: 'Hello World',
        count: 0
      },
      mutations: {
        increment(state) {
            state.count++;
        }
      }
  });
  new Vue({
      el: '#app',
      data() {
        return {
          header: 'Vuex App'
        }
      },
      computed: {
        welcome() {
          return store.state.msg
        },
        counter() {
          return store.state.count;
        }
      },
      methods: {
        increment() {
          store.commit('increment')
        }

      }
  });
</script>
</body>
</html>
